<template>
  <div class="activeBox">
    <div class="activeBox-text">
      <div class="dianlizhi">
        <img style="vertical-align: middle" src="../../assets/image/shandian.png" alt="">： <span style=""
                                                                                                 v-text="electric"></span>
      </div>
      <div class="Luckselect" @click="luckDraw('1')">
        <img src="../../assets/image/Eluck.png" alt="">
      </div>
      <div class="Luckselect" @click="luckDraw('2')">
        <img src="../../assets/image/Jluck.png" alt="">
        <!--        <img src="../../assets/image/bigPriceGray.png" alt="" v-show="!jinliFlag">-->
      </div>
    </div>
    <!--    <div class="activeBox-go" @click="goList">{{ $route.query.type == 4 ? "前往观看" : "GO" }}</div>-->
  </div>
</template>

<script>
import {getUserUrl} from "@/api/login";
import {Toast} from "vant";
import {getLuckDrawUrl} from "@/api/list";
import {activitytime} from "@/utils/activitytime";

export default {
  name: "index",
  data() {
    return {
      electric: "",
      jinliFlag: false,
    };
  },
  mounted() {
    this.getDl();

  },
  methods: {
    getRealTime(time) {
      let realTime = time.replace(/-/g, '/')
      return new Date(realTime).getTime();
    },
    luckDraw(type) {
      if (type === "2") {
        this.clickAudio();
        let now = new Date().getTime();
        if (now < this.getRealTime(activitytime.jinli)) {
          Toast("活动将于2023-1-11开启");
          return;
        }
        this.$router.push({path: "/LuckyDraw", query: {type: type}});
      } else {
        this.clickAudio();
        this.$router.push({path: "/LuckyDraw", query: {type: type}});
      }
    },
    getDl() {
      getUserUrl().then(res => {
        if (res.code === 200) {
          console.log("res.data.electric", res.data.electric);
          this.electric = res.data.electric;
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.activeBox {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/image/start.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &-text {
    width: 80%;
    height: 70%;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBA9BC 100%);
    border-radius: 29px 29px 29px 29px;
    opacity: 1;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .dianlizhi {
      width: 152px;
      height: 53px;
      background: #FFFFFF;
      border-radius: 46px 46px 46px 46px;
      opacity: 1;
      margin-bottom: 30px;

      font-size: 20px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #181818;

      display: flex;
      align-items: center;
      justify-content: center;

      img {
        height: 100%;
      }
    }

    .Luckselect {
      width: 70%;
      margin-bottom: 39px;

      img {
        width: 100%;
      }
    }

  }

  &-go {
    margin-top: 24px;
    min-width: 117px;
    height: 54px;
    padding: 10px;
    background: linear-gradient(180deg, #FFFFFF 0%, #DEA2FC 100%);
    border-radius: 34px 34px 34px 34px;
    opacity: 1;
    text-align: center;
    line-height: 54px;
    font-size: 30px;
    font-family: DIN Pro-Regular, DIN Pro;
    font-weight: 400;
    color: #181818;
  }
}
</style>
